<script setup>
import { ref, shallowRef } from 'vue'
import passwordViewVue from './components/passwordView.vue';
// import * as yup from 'yup'
import passwordView from './components/passwordView.vue'
import smsLoginView from './components/smsLogin.vue';
const after = ref(0)
const flag = ref(true)

const accountLogin = (e) => {
  if (e.target.dataset.type) {
    after.value = e.target.dataset.type
  }
}
</script>

<template>
  <div class="login">
    <div class="login-card">
      <div class="login-card-title" @click="accountLogin">
        <div data-type="0">账号登录</div>
        <div data-type="1">二维码登录</div>
        <div class="after" :style="{ left: 40 + 160 * after + 'px' }"></div>
      </div>
      <div class="login-card-content" v-if="after == 0">
        <password-view v-model:flag="flag" v-if="flag"></password-view>
        <sms-login-view v-model:flag="flag" v-else></sms-login-view>
      </div>
     <div class="login-card-content" v-if="after == 1">
       <div class="weixin">
         <img src="@/assets/weixin.jpg" alt="">
       </div>
       <p class="weixin-text">请使用微信App扫码添加</p>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.login {
  position: relative;
  height: 600px;
  background-image: url('@/assets/login-bg.696efec3.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;

  .login-card {
    $widght: 400;
    $padding: 40;

    position: absolute;
    top: 0;
    bottom: 0;
    right: 20%;
    width: $widght + px;
    height: 500px;
    margin: auto 0;
    background-color: #fff;
    box-shadow: 0 0 10px rgb(0 0 0 / 15%);

    .login-card-title {
      position: relative;
      height: 25px;
      line-height: 25px;
      padding: 25px 40px 15px 40px;

      div {
        text-align: center;
        width: 50%;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
      }

      .after {
        transition: all 0.5s;
        position: absolute;
        left: 40px;
        bottom: 10px;
        width: calc(($widght - $padding * 2)/2)+px;
        height: 2px;
        border-bottom: 2px solid #70b603;
      }
    }


    .login-card-content{
      padding: 0 40px;


      .weixin{
        padding: 40px;
        img{
          width: 100%;
        }
        
      }
      .weixin-text{
          text-align: center;
        }
    }
  }
}
</style>
